<template>
  <div id="app">
    <el-dialog :visible.sync="uploadDialog" title="图纸上传" center width="30%">
      <span>CAD图纸：（复制粘贴即可上传）</span>
      <div v-for='(v, i) in preSalesImg' style="display: flex;align-items: center;margin-right: 10px;">
        <el-image :key="i" style="width: 50px; height: 50px"
                  ref="preview" :src="'https://'+v" :preview-src-list="preSalesImgList">
        </el-image>
        <div @click="deletePic(i)">
          <el-icon name="delete"></el-icon>
        </div>
      </div>
      <span slot="footer">
        <el-button style="background-color:#cccccc;" @click="uploadDialog=false">取消</el-button>
        <el-button style="color: #FFFFFF" @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import {MessageBox,} from 'element-ui'

export default {
  name: "uploadCad",
  data() {
    return {
      uploadDialog: false,
      preSalesImg: [],
      preSalesImgList: [],
      host: this.$imgHost,

    }
  },
  created() {
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    handleOpen(val) {
      this.uploadDialog = true
      this.preSalesImg = []
      this.orderId = val.assignTaskId
      this.storeType = val.storeType
    },
    deletePic(i) {
      this.preSalesImg.splice(i, 1)
    },
    handlePaste(event) {
      if (!this.uploadDialog) return;
      const clipboardData = event.clipboardData || window.clipboardData;
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i];

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile();
            if (file) {
              this.uploadImage(file);
            }
          } else {
            this.$message.error('请拷贝图片!');
            break;
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData();
      formData.append('file', imageFile);
      axios.post(`${this.$apiHost}/img/fileImgUrl`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': window.$quinn.getStorage("tokenv3")
        }
      })
          .then(response => {
            this.preSalesImg = [response.data.result[0]];
            this.preSalesImgList.push('https://' + response.data.result[0]);
          })
          .catch(error => {
          });
    },
    submit() {
      this.$api.assignUploadCad({cadUrl: this.preSalesImg.toString(), assignTaskId: this.orderId}).then(res => {
        if (res == 1) {
          this.$message.success("正在解析请稍后！")
          this.$api.newCadParse({
            assignTaskId: this.orderId,
            storeType: this.storeType,
            cadImg: this.preSalesImg.toString()
          }).then(res => {
            if (!res.code.toString()) {
              this.$message.success("上传成功！")
              this.uploadDialog = false
              this.$emit('addStatus', 1);
            }else{
              MessageBox.alert(
                  `错误编码: ${res.code.join(', ')}`,
                  '转化图解析错误',
                  {
                    confirmButtonText: '关闭',
                    type: 'error',
                    callback: () => {
                      //this.uploadDialog = false; // 重置状态，允许再次弹窗
                    },
                  }
              );
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>